import React from 'react'
import Head from 'next/head'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from "../components/Advert";
import Footer from "../components/Footer";
// Affix 固定效果
import { Col, Row, Breadcrumb, Affix } from 'antd'
import {
  CalendarOutlined,
  FolderOutlined,
  FireTwoTone,
  FileOutlined
} from '@ant-design/icons'
// import ReactMarkdown from 'react-markdown'
// import MarkNav from 'markdown-navbar'
import axios from 'axios'
import { marked } from 'marked'
import highlight from 'highlight.js'
// tocify.tsx jsx
import Tocify from '../components/tocify.tsx'
import serevicePath from '../config/apiUrl';


const Detailed = (props) => {
  const tocify = new Tocify()
  const renderer = new marked.Renderer()
  renderer.heading = function (text, level, raw) {
    const anchor = tocify.add(text, level)
    return `<a id="${anchor}" href="#${anchor}" class="anchor-fix">
      <h${level}>
        ${text}
      </h${level}>
    </a>\n`
  }
  // 解析
  marked.setOptions({
    renderer: renderer,
    gfm: true,
    // 增添容错率 保证markdown完全正确
    pedantic: false,
    // 不忽略html标签
    sanitize: false,
    tables: true,
    breaks: false,
    // 自动渲染页面
    smartLists: true,
    highlight: function (code) {
      return highlight.highlightAuto(code).value
    }
  })
  // 将markdown转换为html
  let html = marked(props.article_content)
  // 还需要将html转为文字形式 而不是html标签形式
  return (
    <div>
      <Head>
        <title>Detailed</title>
      </Head>
      <Header />
      <Row className="comm-main" type="flex" justify='center'>
        {/* 每一个属性都表示适配功能 可以把页面分成平均24列 然后进行布局 */}
        <Col className='comm-left' xs={24} sm={24} md={16} lg={18} xl={14}>
          <div>
            <div className='bread-div'>
              <Breadcrumb>
                <Breadcrumb.Item>
                  <a href='/'>首页</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                  <a href='/list'>视屏教程</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                  xxxx
                </Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div>
              <div className='detailed-title'>
                React实战视屏教程-技术胖Blog开发 （更新第10集）
              </div>
              <div className='list-icon center'>
                <span>
                  <CalendarOutlined />
                  2019-06-28
                </span>
                <span>
                  <FolderOutlined />
                  视屏教程
                </span>
                <span className='list-span_fire'>
                  <FireTwoTone twoToneColor="#f0732e" />
                  5498&nbsp;&nbsp;&nbsp;人
                </span>
              </div>
              <div className='detailed-content'
                dangerouslySetInnerHTML={{ __html: html }}
              >
              </div>
            </div>
          </div>
        </Col>
        <Col className='comm-right' xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
          {/* offsetTop 固定效果 像素为单位 */}
          <Affix offsetTop={5}>
            <div className='detailed-nav comm-box'>
              <div className='nav-title'>
                文章目录
              </div>
              {tocify && tocify.render()}
            </div>
          </Affix>
        </Col>
      </Row>
      <Footer />
    </div>
  )
}

// 根据组件传来的参数
Detailed.getInitialProps = async (context) => {
  let id = context.query.id
  // 从后台拿数据
  const promise = new Promise((resolve) => {
    // 默认get方法
    axios(serevicePath.getArticleById + id)
      .then(
        (res) => {
          resolve(res.data.data[0])
        }
      )
  })
  return await promise
}

export default Detailed
